<template>
	<block class="warp" style="background-color: #FFFFFF;">
		<!-- <view class="home_top"></view> -->
		<scroll-view class="box_content flex">
			<view class='searchGood select'>
				<view class='search  flex'>
					<text class='iconfont' style="color: #999999;font-size:55rpx;">&#xe66a;</text>
					<input type='text' style="width: 70%;" v-model='keyword' placeholder='输入订单号'
						placeholder-class='placeholder' />
				</view>
				<view class="btn" @click="query()">
					查询
				</view>
			</view>
			<view class="tab">
				<tab :tabs="tabTitle" @change="childFn" v-model="activeTab" field="name"></tab>
			</view>
			<scroll-view class="shop_item" scroll-y>
				<view class="item" v-for="(item,index) in list" :key="index" @click="jumpto(item)">
					<image :src="item.worker.avatar" style="width: 150rpx;height: 150rpx;"></image>
					<view class="orderNo">订单号:{{item.order_id}}</view>
					<view class="name">师傅:{{item.worker.nickname}}</view>
					<view class="close" @click.stop="close(item.id)" v-if="item.status < 4">
						取消订单
					</view>
					<view class="time">日期:{{item.add_time_date}}</view>
					<view class="status" v-if="item.status == '6'">已完成</view>
					<view class="status" v-if="item.status == '7'">已取消</view>
					<view class="opration-dsl" v-if="item.status == '0'">已报修</view>
					<view class="opration-wsl" v-if="item.status == '1'">待受理</view>
					<view class="opration-zpz" v-if="item.status == '2'">待派工</view>
					<view class="opration-jxz" v-if="item.status == '3'">进行中</view>
					<!-- <view class="opration-qpj" v-if="item.status == '6' && item.is_comment == 0" @click="topj(item)">去评价</view> -->
					<!-- <view class="opration-ypj" v-if="item.status == '6' && item.is_comment != 0">已评价</view> -->
					<view class="opration-ypj" v-if="item.status == '4'">待确认</view>
					<!-- <view class="opration-jxz" v-if="item.status == '6'">进行中</view> -->
					<view class="opration-jxz" v-if="item.status == '5'">待支付</view>
				</view>
				<view class="end" v-if="count != list.length">
					共{{count}}条订单
				</view>
				<view class="end" v-if="count == list.length">
					没有更多了~~
				</view>
			</scroll-view>
		</scroll-view>
	</block>
</template>

<script>
	import tab from '../../tab.vue'
	import {
		WorkerWorkList,cancelWorkWorker
	} from '../../../api/api.js'
	export default {
		components: {
			tab
		},
		data() {
			return {
				tabTitle: [{
						name: "待受理",
						id: 1
					},
					{
						name: "进行中",
						id: 2
					},
					{
						name: "已完成",
						id: 3
					},
					
				],
				list: [],
				statusBarHeight: "",
				keyword: "",
				type: 1,
				page: 1,
				limit: 20,
				count: 0,
			}
		},
		onLoad(opt) {
			this.type = opt.tab + 1
			console.log(this.type)
		},
		created() {
			this.statusBarHeight = uni.getStorageSync('statusBarHeight')
			this.query()
		},
		methods: {

			// 跳转详情
			jumpto(e) {
				console.log('订单信息', e, )
				// let that = this
				let data = JSON.stringify(e)

				if (this.type == 1) {
					uni.navigateTo({
						url: `/pages/sfOrderPend/sfOrderPend?data=${data}`
					})
				}
				if (this.type == 2) {

					if (e.status == '4' || e.status == '5') {
						uni.navigateTo({
							url: `/pages/sfOrderInfo/sfOrderInfo?data=${data}`
						})
						return
					}
					uni.navigateTo({
						url: `/pages/sfOrderOngo/sfOrderOngo?data=${data}`
					})
				}
				if (this.type == 3) {
					uni.navigateTo({
						url: `/pages/sfOrderInfo/sfOrderInfo?data=${data}`
					})
				}
			},
			// 取消订单
			close(e){
				let that = this
				uni.showModal({
					title:'提示',
					content:'确定取消订单吗？',
					showCancel:true,
					cancelText:'我点错了',
					success:(res)=>{
						if(res.confirm){
							cancelWorkWorker({id:e}).then(res=>{
								if(res.status == 200){
									uni.showToast({
										title:res.msg,
										icon:"none"
									})
									// setTimeout(()=>{
										that.query()
									// },300)
								}else{
									uni.showToast({
										title:res.msg,
										icon:"none"
									})
								}
							})
						}else{
							
						}
					}
				})
			},
			query() {
				this.list = []
				let data = {
					order_id: this.keyword,
					type: this.type,
					page: this.page,
					limit: this.limit
				}
				WorkerWorkList(data).then(res => {
					console.log(res)
					this.list = res.data.list || []
					this.count = res.data.count
				})
			},
			childFn(e) {
				console.log(e)
				this.type = e + 1
				this.query()
			},
		}
	}
</script>

<style scoped lang="less">
	.home_top {
		/* padding-left: -25px; */
		// background-image: url('http://xiaowen.cool:86/yjky/yjkybg.png');
		// background-size: cover;
		// width: 750upx;
		// height: 370upx;
		// padding: 20upx;
		// box-sizing: border-box;
		// flex-direction: row;
		// align-items: center;
	}

	.box_content {
		display: flex;
		position: absolute;
		top: 0rpx;
		background-color: #FFFFFF;
		bottom: 0;
	}

	
	.btn {
		background-color: #029E8E;
		padding: 10rpx;
		display: block;
		color: #FFFFFF;
		border-radius: 10rpx;
		width: 100rpx;
		margin-left: 50rpx;
		text-align: center;
		line-height: 40rpx;
	}

	.tab {
		// display: block;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		z-index: 99;
		position: fixed;
		top: 110rpx;
	}


	.shop_item {
		display: block;
		padding: 30rpx;
		width: 100%;
		position: fixed;
		top: 160rpx;
		text-align: center;
		height: calc(75%);

		.end {
			margin-top: 50rpx;
			color: #333333;
			display: block;
			text-align: center;
			line-height: 60rpx;
			height: 60rpx;
		}

		.item {
			margin-left: 10rpx;
			// transform: translateX(-50%);
			width: 90%;
			margin-top: 25rpx;
			box-shadow: 0rpx 0rpx 10rpx 10rpx rgba(0, 0, 0, .05);
			height: 230rpx;
			position: relative;
			.close {
				position: absolute;
				right: 10rpx;
				padding: 5rpx 15rpx;
				border-radius: 10rpx;
				top: 10rpx;
				color: #999;
				// background-color: #D52F33;
				text-align: center;
			}
			.name {
				position: absolute;
				top: 90rpx;
				color: #999999;
				left: 170rpx;
			}

			.orderNo {
				position: absolute;
				top: 30rpx;
				color: #333333;
				font-size: 28rpx;
				left: 170rpx;
			}

			.time {
				position: absolute;
				top: 150rpx;
				color: #999999;
				left: 170rpx;
			}

			.status {
				position: absolute;
				top: 30rpx;
				color: #999999;
				right: 30rpx;
			}

			image {
				position: absolute;
				top: 30rpx;
				left: 10rpx;
				border-radius: 10rpx;
			}

			.opration-qpj,
			.opration-dsl,
			.opration-jxz,
			.opration-wsl,
			.opration-ypj,
			.opration-zpz {
				position: absolute;
				color: #FFFFFF;
				right: 30rpx;
				top: 140rpx;
				// background-color: #A0D675;
				padding: 5rpx 15rpx;
				border-radius: 10rpx;
			}

			.opration-ypj {
				background-color: #A0D675;
			}

			.opration-dsl {
				background-color: #FEC860;
			}

			.opration-jxz {
				background-color: #5490FE;
			}

			.opration-wsl {
				background-color: #FD3833;
			}

			.opration-zpz {
				background-color: #FD3833;
			}

			.opration-jxz {
				background-color: #5490FE;
			}

			.opration-dqr {
				background-color: #5490FE;
			}

			.opration-qpj {
				background-color: #A0D675;
			}


		}
	}
	
</style>
